@charset "UTF-8";

// About
.chat {
    margin-top: 30px;
    height: 100%;

    .chat_date {
        text-align: center;

        span {
            font-size: 18px;
            color: #299999;
        }
    }

    ul {
        list-style: outside none none;

        li {
            padding: 10px 0 10px 0;

            .chat_time {
                text-align: center;
                font-size: 13px;
                color: #999;
            }

            .chat_main {
                display: block;

                .chat_avatar {
                    width: 30px;
                    height: 30px;
                }

                .chat_avatar_left {
                    float: left;
                }

                .chat_avatar_right {
                    float: right;
                }

                .chat_text {
                    width: auto;
                    display: block;
                    position: relative;

                    .chat_nickname {
                        display: block;
                        color: #999;
                        font-size: 13px;
                    }

                    .chat_nickname_left {
                    }

                    .chat_nickname_right {
                        text-align: right;
                    }

                    .chat_message {
                        display: block;
                        overflow: hidden;
                        max-width: 200px;
                        border-width: 0;
                        border-radius: 8px;
                        margin-top: 5px;
                        padding: 5px 8px 5px 8px;

                        span {
                            width: auto;
                            color: #666;
                            font-size: 12px;
                            word-break: normal;
                            white-space: pre-wrap;
                            word-wrap: break-word;
                        }
                    }

                    .chat_message_left {
                        text-align: left;
                        background-color: #66D9EF;
                    }

                    .chat_message_right {
                        text-align: left;
                        background-color: #99FF66;
                    }
                }

                .chat_text_left {
                    float: left;
                    margin-left: 10px;
                }

                .chat_text_right {
                    float: right;
                    margin-right: 10px;
                }
            }

            .left {
                float: left;
            }

            .right {
                float: right;
            }

            &:after {
                display: table;
                content: "";
                width: 0;
                clear: both;
            }
        }
    }
}
